import React from 'react';

interface TomatoTreeProps {
  /** 总番茄数量 */
  totalTomatoes?: number;
  /** 当前填充的番茄果索引 (0-based) */
  currentTomatoIndex: number;
  /** 当前番茄果的填充进度 0-1 */
  currentProgress: number;
  /** 组件尺寸 */
  size?: number;
}

const TomatoTree: React.FC<TomatoTreeProps> = ({
  totalTomatoes = 5,
  currentTomatoIndex,
  currentProgress,
  size = 320,
}) => {
  // 番茄位置 - 参考图片的分布
  const tomatoPositions = [
    { x: 35, y: 22 },   // 左上
    { x: 65, y: 18 },   // 右上
    { x: 22, y: 42 },   // 左中
    { x: 50, y: 38 },   // 中央
    { x: 78, y: 42 },   // 右中
    { x: 35, y: 58 },   // 左下
    { x: 65, y: 58 },   // 右下
    { x: 50, y: 68 },   // 最下
  ].slice(0, totalTomatoes);

  return (
    <div className="flex flex-col items-center">
      <div className="relative" style={{ width: size, height: size * 0.9 }}>
        <svg
          width={size}
          height={size * 0.9}
          viewBox="0 0 100 90"
          className="drop-shadow-xl"
        >
          <defs>
            {/* 树冠渐变 - 深绿 */}
            <radialGradient id="foliageDark" cx="40%" cy="40%">
              <stop offset="0%" stopColor="#4a9d5f" />
              <stop offset="100%" stopColor="#2d7a45" />
            </radialGradient>

            {/* 树冠渐变 - 中绿 */}
            <radialGradient id="foliageMid" cx="40%" cy="40%">
              <stop offset="0%" stopColor="#6bc47d" />
              <stop offset="100%" stopColor="#4a9d5f" />
            </radialGradient>

            {/* 树冠渐变 - 浅绿 */}
            <radialGradient id="foliageLight" cx="35%" cy="35%">
              <stop offset="0%" stopColor="#8fd99f" />
              <stop offset="100%" stopColor="#6bc47d" />
            </radialGradient>

            {/* 树干渐变 */}
            <linearGradient id="trunkGrad" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" stopColor="#6b4423" />
              <stop offset="30%" stopColor="#8b5a2b" />
              <stop offset="60%" stopColor="#a0683d" />
              <stop offset="100%" stopColor="#7a4f2e" />
            </linearGradient>

            {/* 番茄渐变 */}
            <radialGradient id="tomatoGrad" cx="35%" cy="30%">
              <stop offset="0%" stopColor="#ff6b6b" />
              <stop offset="40%" stopColor="#ee5a52" />
              <stop offset="100%" stopColor="#d63031" />
            </radialGradient>

            {/* 番茄高光 */}
            <radialGradient id="tomatoHighlight" cx="30%" cy="25%">
              <stop offset="0%" stopColor="rgba(255,255,255,0.9)" />
              <stop offset="50%" stopColor="rgba(255,255,255,0.3)" />
              <stop offset="100%" stopColor="rgba(255,255,255,0)" />
            </radialGradient>

            {/* 叶子渐变 */}
            <radialGradient id="leafGrad" cx="40%" cy="30%">
              <stop offset="0%" stopColor="#d4e89e" />
              <stop offset="100%" stopColor="#a8c969" />
            </radialGradient>

            {/* 阴影滤镜 */}
            <filter id="dropShadow" x="-50%" y="-50%" width="200%" height="200%">
              <feGaussianBlur in="SourceAlpha" stdDeviation="1"/>
              <feOffset dx="0.5" dy="1" result="offsetblur"/>
              <feComponentTransfer>
                <feFuncA type="linear" slope="0.4"/>
              </feComponentTransfer>
              <feMerge>
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"/>
              </feMerge>
            </filter>

            {/* 发光效果 */}
            <filter id="glow">
              <feGaussianBlur stdDeviation="1.5" result="coloredBlur"/>
              <feMerge>
                <feMergeNode in="coloredBlur"/>
                <feMergeNode in="SourceGraphic"/>
              </feMerge>
            </filter>
          </defs>

          {/* 树干 */}
          <g filter="url(#dropShadow)">
            {/* 主树干 */}
            <path
              d="M45 88 L44 75 Q44 72, 45 68 L45 62 Q45 58, 46 55 L46 50"
              fill="url(#trunkGrad)"
              stroke="#5a3419"
              strokeWidth="0.5"
            />
            <path
              d="M55 88 L56 75 Q56 72, 55 68 L55 62 Q55 58, 54 55 L54 50"
              fill="url(#trunkGrad)"
              stroke="#5a3419"
              strokeWidth="0.5"
            />
            <rect x="44" y="50" width="12" height="38" fill="url(#trunkGrad)" stroke="#5a3419" strokeWidth="0.5" rx="1"/>
            
            {/* 树干纹理 */}
            <ellipse cx="50" cy="60" rx="4" ry="2.5" fill="#5a3419" opacity="0.3"/>
            <ellipse cx="49" cy="70" rx="3.5" ry="2" fill="#5a3419" opacity="0.25"/>
            <ellipse cx="51" cy="78" rx="4" ry="2.5" fill="#5a3419" opacity="0.3"/>
            
            {/* 树干高光 */}
            <rect x="47" y="52" width="2" height="34" fill="white" opacity="0.15" rx="1"/>
          </g>

          {/* 树根 */}
          <ellipse cx="50" cy="88" rx="10" ry="3" fill="#5a3419" opacity="0.4"/>
          <ellipse cx="50" cy="87.5" rx="8" ry="2.5" fill="#6b4423" opacity="0.5"/>

          {/* 树冠 - 多层云朵状 */}
          <g filter="url(#dropShadow)">
            {/* 底层 - 深绿色 */}
            <circle cx="30" cy="52" r="13" fill="url(#foliageDark)"/>
            <circle cx="70" cy="52" r="13" fill="url(#foliageDark)"/>
            <circle cx="25" cy="38" r="11" fill="url(#foliageDark)"/>
            <circle cx="75" cy="38" r="11" fill="url(#foliageDark)"/>
            
            {/* 中层 - 中绿色 */}
            <circle cx="50" cy="55" r="15" fill="url(#foliageMid)"/>
            <circle cx="35" cy="42" r="13" fill="url(#foliageMid)"/>
            <circle cx="65" cy="42" r="13" fill="url(#foliageMid)"/>
            <circle cx="20" cy="45" r="10" fill="url(#foliageMid)"/>
            <circle cx="80" cy="45" r="10" fill="url(#foliageMid)"/>
            
            {/* 顶层 - 浅绿色 */}
            <circle cx="50" cy="35" r="14" fill="url(#foliageLight)"/>
            <circle cx="38" cy="28" r="11" fill="url(#foliageLight)"/>
            <circle cx="62" cy="28" r="11" fill="url(#foliageLight)"/>
            <circle cx="50" cy="20" r="9" fill="url(#foliageLight)"/>
            
            {/* 高光层 */}
            <circle cx="48" cy="32" r="8" fill="white" opacity="0.2"/>
            <circle cx="60" cy="26" r="6" fill="white" opacity="0.15"/>
          </g>

          {/* 小叶子装饰 */}
          <g>
            <ellipse cx="32" cy="30" rx="2.5" ry="2" fill="url(#leafGrad)" opacity="0.9" transform="rotate(-20 32 30)"/>
            <ellipse cx="68" cy="32" rx="2.5" ry="2" fill="url(#leafGrad)" opacity="0.9" transform="rotate(25 68 32)"/>
            <ellipse cx="25" cy="48" rx="2" ry="1.5" fill="url(#leafGrad)" opacity="0.85" transform="rotate(-30 25 48)"/>
            <ellipse cx="75" cy="50" rx="2" ry="1.5" fill="url(#leafGrad)" opacity="0.85" transform="rotate(30 75 50)"/>
            <ellipse cx="45" cy="24" rx="2.2" ry="1.8" fill="url(#leafGrad)" opacity="0.9" transform="rotate(-15 45 24)"/>
            <ellipse cx="55" cy="22" rx="2.2" ry="1.8" fill="url(#leafGrad)" opacity="0.9" transform="rotate(20 55 22)"/>
          </g>

          {/* 番茄果实 */}
          {tomatoPositions.map((pos, index) => {
            const isFilled = index < currentTomatoIndex;
            const isCurrent = index === currentTomatoIndex;
            
            let fillProgress = 0;
            if (isFilled) fillProgress = 1;
            else if (isCurrent) fillProgress = currentProgress;

            return (
              <g key={index} transform={`translate(${pos.x}, ${pos.y})`}>
                {/* 番茄阴影 */}
                <ellipse
                  cx="0"
                  cy="1"
                  rx="4.5"
                  ry="4"
                  fill="black"
                  opacity="0.15"
                />

                {/* 发光效果 - 充满或正在充满时 */}
                {(isFilled || (isCurrent && fillProgress > 0.5)) && (
                  <circle
                    cx="0"
                    cy="0"
                    r="6"
                    fill="#ff6b6b"
                    opacity={isFilled ? 0.25 : 0.15}
                    filter="url(#glow)"
                    className={isCurrent ? "animate-pulse" : ""}
                  />
                )}

                {/* 番茄主体背景 */}
                <circle
                  cx="0"
                  cy="0"
                  r="4.5"
                  fill={fillProgress > 0.05 ? "url(#tomatoGrad)" : "#e0e0e0"}
                  stroke={fillProgress > 0.05 ? "#c0392b" : "#bdbdbd"}
                  strokeWidth="0.4"
                  opacity={fillProgress > 0.05 ? 1 : 0.5}
                />

                {/* 填充遮罩效果 - 从下往上 */}
                {fillProgress < 1 && fillProgress > 0 && (
                  <g>
                    <defs>
                      <clipPath id={`tomatoClip-${index}`}>
                        <circle cx="0" cy="0" r="4.5"/>
                      </clipPath>
                    </defs>
                    <g clipPath={`url(#tomatoClip-${index})`}>
                      <rect
                        x="-5"
                        y={-5 + (1 - fillProgress) * 10}
                        width="10"
                        height={fillProgress * 10}
                        fill="url(#tomatoGrad)"
                        className="transition-all duration-700 ease-out"
                      />
                      {/* 波浪效果 */}
                      {fillProgress > 0.1 && (
                        <path
                          d={`M-5 ${-5 + (1 - fillProgress) * 10}
                            Q-2.5 ${-5.5 + (1 - fillProgress) * 10}, 0 ${-5 + (1 - fillProgress) * 10}
                            T5 ${-5 + (1 - fillProgress) * 10}`}
                          fill="white"
                          opacity="0.3"
                          className="animate-wave"
                        />
                      )}
                    </g>
                  </g>
                )}

                {/* 番茄高光 - 填充后显示 */}
                {fillProgress > 0.1 && (
                  <>
                    <ellipse
                      cx="-1.2"
                      cy="-1.5"
                      rx="1.8"
                      ry="1.5"
                      fill="white"
                      opacity="0.7"
                    />
                    <ellipse
                      cx="-0.8"
                      cy="-1"
                      rx="0.8"
                      ry="0.7"
                      fill="white"
                      opacity="0.9"
                    />
                  </>
                )}

                {/* 番茄茎叶 */}
                <g>
                  <path
                    d="M-0.3 -4.5 Q-1 -5.5, -1.5 -5.2"
                    stroke="#2d7a45"
                    strokeWidth="0.6"
                    fill="none"
                    strokeLinecap="round"
                  />
                  <path
                    d="M0.3 -4.5 Q1 -6, 1.8 -5.5"
                    stroke="#2d7a45"
                    strokeWidth="0.6"
                    fill="none"
                    strokeLinecap="round"
                  />
                  <path
                    d="M0 -4.5 Q0.5 -5.5, 0.8 -6.2"
                    stroke="#2d7a45"
                    strokeWidth="0.5"
                    fill="none"
                    strokeLinecap="round"
                  />
                  
                  {/* 茎叶装饰 */}
                  <ellipse cx="-1.4" cy="-5" rx="0.7" ry="0.6" fill="#6bc47d" opacity="0.8"/>
                  <ellipse cx="1.7" cy="-5.3" rx="0.8" ry="0.6" fill="#6bc47d" opacity="0.8"/>
                  <ellipse cx="0.9" cy="-6" rx="0.6" ry="0.5" fill="#8fd99f" opacity="0.8"/>
                </g>

                {/* 番茄轮廓强调 */}
                <circle
                  cx="0"
                  cy="0"
                  r="4.5"
                  fill="none"
                  stroke={fillProgress > 0.5 ? "#a82f1f" : "#9e9e9e"}
                  strokeWidth="0.3"
                  opacity={fillProgress > 0.5 ? 0.6 : 0.3}
                />

                {/* 表情 - 充满时 */}
                {isFilled && (
                  <>
                    {/* 眼睛 */}
                    <circle cx="-1.3" cy="-0.3" r="0.5" fill="#2c3e50"/>
                    <circle cx="1.3" cy="-0.3" r="0.5" fill="#2c3e50"/>
                    {/* 高光 */}
                    <circle cx="-1.1" cy="-0.5" r="0.2" fill="white"/>
                    <circle cx="1.5" cy="-0.5" r="0.2" fill="white"/>
                    {/* 微笑 */}
                    <path
                      d="M-1.2 0.8 Q0 1.8, 1.2 0.8"
                      stroke="#2c3e50"
                      strokeWidth="0.4"
                      fill="none"
                      strokeLinecap="round"
                    />
                    {/* 腮红 */}
                    <ellipse cx="-2.2" cy="0.5" rx="0.7" ry="0.5" fill="#ff9999" opacity="0.5"/>
                    <ellipse cx="2.2" cy="0.5" rx="0.7" ry="0.5" fill="#ff9999" opacity="0.5"/>
                  </>
                )}

                {/* 正在充满的表情 */}
                {isCurrent && fillProgress > 0.3 && fillProgress < 1 && (
                  <>
                    <circle cx="-1.3" cy="-0.3" r="0.4" fill="#2c3e50"/>
                    <circle cx="1.3" cy="-0.3" r="0.4" fill="#2c3e50"/>
                    <line x1="-1" y1="0.8" x2="1" y2="0.8" stroke="#2c3e50" strokeWidth="0.3"/>
                  </>
                )}
              </g>
            );
          })}
        </svg>
      </div>

      <div className="mt-3 text-center">
        <p className="text-2xl font-bold" style={{ color: '#d63031' }}>
          {currentTomatoIndex} / {totalTomatoes} 🍅
        </p>
        <p className="text-sm text-muted-foreground">
          当前: {Math.round(currentProgress * 100)}%
        </p>
      </div>

      <style>{`
        @keyframes wave {
          0%, 100% { transform: translateX(0); }
          50% { transform: translateX(-0.5px); }
        }
        .animate-wave {
          animation: wave 2s ease-in-out infinite;
        }
        .animate-pulse {
          animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        @keyframes pulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.6; }
        }
      `}</style>
    </div>
  );
};

export default TomatoTree;
